<template>
    <div>
        <Aside />
        <!-- cesium -->
        <div id="cesiumContainer"></div>
    </div>
</template>
<script setup name="App">
import { onMounted, onUnmounted } from 'vue'
import * as Cesium from 'cesium'

import Aside from '@/components/aside/Aside.vue'
Cesium.Ion.defaultAccessToken = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI0Y2YxYWFiOC1hMjkxLTQ3MmQtOTMzOC02ODQzNGYzZThjYmIiLCJpZCI6MTg0MTQwLCJpYXQiOjE3MDI0NDY4MDR9.Xax9xESQVAXXQgP_6OnWSj0AAvpwFh_FLQAxjdwfaZ0"
let viewer;
onMounted(() => {
    // 地球视图，底图加载
    viewer = new Cesium.Viewer('cesiumContainer', {
        //地形图层
        terrain: Cesium.Terrain.fromWorldTerrain(),
        //信息窗口
        infoBox: false,
        //home按钮
        homeButton: false,
        //控制查看器的显示模式
        sceneModePicker: false,
        // 是否显示图层选择
        baseLayerPicker: false,
        //帮助按钮
        navigationHelpButton: false,
        //全屏模式
        fullscreenButton: false,
        //显示查询按钮
        // geocoder: false,
    });
    // viewer.extend(Cesium.viewerCesiumInspectorMixin);
    // cesium基本设置
    function cesiumDefaultModel(viewer) {
        //隐藏cesium Icon-logo
        viewer.cesiumWidget.creditContainer.style.display = 'none';
        //帧率
        viewer.scene.debugShowFramesPerSecond = true;
        // cesium的默认视角
        Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(89.5, 20.4, 110.4, 61.2);
        // 抗锯齿
        viewer.scene.fxaa = true;
        viewer.scene.postProcessStages.fxaa.enabled = false;
        // 水雾特效
        viewer.scene.globe.showGroundAtmosphere = true;
        // 设置最大俯仰角，[-90,0]区间内，默认为-30，单位弧度
        viewer.scene.screenSpaceCameraController.constrainedPitch = Cesium.Math.toRadians(-20);
        viewer.scene.screenSpaceCameraController.autoResetHeadingPitch = false;
        viewer.scene.screenSpaceCameraController.inertiaZoom = 0.5;
        //设置缩放程度
        viewer.scene.screenSpaceCameraController.minimumZoomDistance = 50;
        viewer.scene.screenSpaceCameraController.maximumZoomDistance = 30000000;
        //设置视角缩放类型
        //设置鼠标操作
        viewer.scene.screenSpaceCameraController.zoomEventTypes = [
            Cesium.CameraEventType.RIGHT_DRAG,
            Cesium.CameraEventType.WHEEL,
            Cesium.CameraEventType.PINCH,
        ];
        viewer.scene.screenSpaceCameraController.tiltEventTypes = [
            Cesium.CameraEventType.MIDDLE_DRAG,
            Cesium.CameraEventType.PINCH,
            {
                eventType: Cesium.CameraEventType.LEFT_DRAG,
                modifier: Cesium.KeyboardEventModifier.CTRL,
            },
            {
                eventType: Cesium.CameraEventType.RIGHT_DRAG,
                modifier: Cesium.KeyboardEventModifier.CTRL,
            },
        ];
        //地形夸张 拉伸地形
        // viewer.scene.globe.terrainExaggeration = 1.0;
        //添加OMS 房屋
        // viewer.scene.primitives.add(await Cesium.createOsmBuildingsAsync())
        //添加瓦片坐标信息
        // viewer.imageryLayers.addImageryProvider(new Cesium.TileCoordinatesImageryProvider())
        // 将三维球定位到中国
        viewer.camera.flyTo({
            destination: Cesium.Cartesian3.fromDegrees(103.84, 31.15, 17850000),
            orientation: {
                heading: Cesium.Math.toRadians(348.4202942851978),
                pitch: Cesium.Math.toRadians(-89.74026687972041),
                roll: Cesium.Math.toRadians(0)
            },
            complete: function callback() {
                // 定位完成之后的回调函数
            }
        });
    }
    cesiumDefaultModel(viewer); //调用方法

    const czml = [
        {
            id: "document",
            name: "CZML Model",
            version: "1.0",
            clock: {
                interval: "2023-03-19T16:00:00Z/2023-03-19T16:10:00Z",
                currentTime: "2023-03-19T16:00:00Z",
                multiplier: 60,
                range: "LOOP_STOP",
                step: "SYSTEM_CLOCK_MULTIPLIER",
            },
        },
        {
            id: "test model",
            name: "Cesium Air",
            position: {
                cartographicDegrees: [107, 30, 15000],
            },
            model: {
                gltf: "../data/glb/launchvehicle.glb",
                scale: 1.5,
                minimumPixelSize: 128,
                runAnimations: false,
                articulations: {
                    "Fairing Open": {
                        epoch: "2023-03-19T16:00:00Z",
                        number: [0, 0, 600, 120],
                    },
                    "Fairing Separate": {
                        epoch: "2023-03-19T16:00:00Z",
                        number: [0, 0, 400, -50],
                    },
                    "Fairing Drop": {
                        epoch: "2023-03-19T16:00:00Z",
                        interpolationAlgorithm: "LAGRANGE",
                        interpolationDegree: 2,
                        number: [0, 0, 80, 0, 100, 0, 120, -1, 600, -120],
                    },
                },
            }
        }
    ]

    const dataSourcePromise = viewer.dataSources.add(
        Cesium.CzmlDataSource.load(czml)
    );

    dataSourcePromise.then(function (dataSource) {
        viewer.trackedEntity = dataSource.entities.getById("test model");
    }).catch(function (error) {
        console.error(error);
    });
})
onUnmounted(() => {
    viewer.destroy();
})
</script>

<style scoped></style>